<template>
	<view class="container">
		<!-- 收货地址 -->
		<view class="address-section" v-if="orderObj.orderType == 1">
			<view class="address-title">我的地址</view>
			<view class="address-content">
				<text class="receiver">{{ orderInfo.userName }}</text>
				<text class="phone">{{ orderInfo.pickupPhone }}</text>
				<text
					class="address">{{ orderInfo.userProvince }}{{ orderInfo.userCity }}{{ orderInfo.userDistrict }}{{ orderInfo.userAddress }}</text>
			</view>
		</view>


		<!-- 订单详情 -->
		<view class="order-info-section">
			<view class="order-title">订单详情</view>
			<view class="order-content">
				<view class="order-detail">
					<text class="label">订单编号：</text>
					<text class="value">{{ orderInfo.orderNo }}</text>
				</view>
				<view class="order-detail">
					<text class="label">下单时间：</text>
					<text class="value">{{ orderInfo.orderTime }}</text>
				</view>

				<view class="order-detail" v-if="orderInfo.status == 3">
					<text class="label">取货电话：</text>
					<text class="value">{{ orderInfo.pickupPhone }}</text>
				</view>
				<view class="order-detail" v-if="orderInfo.status == 3">
					<text class="label">自提地址：</text>
					<text class="value">{{ orderInfo.pickupAddress }}</text>
				</view>
				<view class="order-detail" v-if="orderInfo.status == 4">
					<text class="label">取货时间：</text>
					<text class="value">{{ orderInfo.okTime }}</text>
				</view>
				<view class="order-detail" v-if="orderInfo.status == 1 || orderInfo.status == 2">
					<text class="label">发货时间：</text>
					<text class="value">{{ orderInfo.faHuoTime }}</text>
				</view>
				<view class="order-detail" v-if="orderInfo.status == 1 || orderInfo.status == 2">
					<text class="label">物流公司：</text>
					<text class="value">{{ orderInfo.deliveryMethod }}</text>
				</view>
				<view class="order-detail" v-if="orderInfo.status == 1 || orderInfo.status == 2">
					<text class="label">物流单号：</text>
					<text class="value">{{ orderInfo.trackingNo }}</text>
				</view>
				<view class="order-detail" v-if="orderInfo.status == 2">
					<text class="label">收货时间：</text>
					<text class="value">{{ orderInfo.okTime }}</text>
				</view>

			</view>
		</view>

		<!-- 商品信息 -->
		<view class="product-section">
			<view class="product-item">
				<image :src="orderInfo.product_image" class="product-image"></image>
				<view class="product-info">
					<view class="product-name">{{ orderInfo.product_name }}</view>
					<view class="product-spec">规格：{{ orderInfo.spec }}</view>
					<view class="product-quantity">数量：{{ orderInfo.quantity }}</view>
				</view>
				<view class="product-points">{{ orderInfo.points }}积分</view>
			</view>
		</view>

		<!-- 按钮区域 -->
		<view class="button-section" v-if="orderObj.orderType == 1 && orderObj.status == 1">
			<view class="button-container">
				<view v-if="orderObj.orderType == 1" style="display: flex;">
					<button class="confirm-btn" @click="handlePickup">确认收货</button>
				</view>

			</view>
		</view>

		<!-- 状态提示 -->
		<view class="status-section" v-if="orderObj.status === 2 || orderObj.status === 4">
			<view class="status-icon">
				<image src="/static/icons/check-circle.png" class="status-icon-img"></image>
				<text class="status-text">已取货</text>
			</view>
			<text class="status-desc">已取货，祝您使用愉快！</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		useStore
	} from '@/store/counter.js';
	import {
		passenger
	} from '@/api/index.js'
	const storeObj = useStore();

	// 定义订单详情数据
	const orderInfo = ref({
		userName: '王丽',
		userPhone: '139****2222',
		userProvince: '河北省',
		userCity: '邯郸市',
		userDistrict: '丛台区',
		userAddress: '广安路广安小区',
		orderNo: 'AW123456789',
		orderTime: '2025-03-11 14:48:23',
		status: 0, // 0: 待收货, 1: 待自提, 2: 已取货
		pickupTime: '2025.3.1-2025.3.31',
		pickupPhone: '13911112222',
		pickupAddress: '河北省邯郸市经济开发区美的路113号',
		product_image: 'https://aw2025ht.kangye.xyz/api/profile/upload/RTkJqu4KOxiy.png',
		product_name: '立美丝凡士林保湿霜干皮润肤霜身体乳',
		spec: '250g',
		quantity: 1,
		points: 199
	});

	const orderObj = ref({});

	// 页面加载时处理传参
	onLoad(() => {
		orderObj.value = storeObj.orderObj;
		orderInfo.value = storeObj.orderObj;
		// 实际项目中应通过API获取订单详情
		console.log('加载订单详情:', orderObj.value);
	});

	// 查看物流按钮点击事件
	const seeWuLiu = () => {
		uni.showToast({
			title: '物流信息',
			icon: 'none'
		});
	};

	// 确认收货按钮点击事件
	const handlePickup = () => {
		uni.showModal({
			title: '确认收货',
			content: '确认已经收到商品吗？',
			success: async (res) => {
				if (res.confirm) {
					// 更新订单状态
					orderInfo.value.status = 2;
					// 去后台发送请求修改代码
					let asdf = {
						id: orderInfo.value.id,
						okTime: new Date(),
						status: 4,
					}
					let res = await passenger.updateOrderPoints(asdf)
					if (res.code == 200) {
						//成功
						uni.showToast({
							title: '确认收货成功',
							icon: 'success'
						});
					}

				}
			}
		});
	};

	// 去自提按钮点击事件
	const handleGoPickup = () => {
		uni.showToast({
			title: '请前往自提点取货',
			icon: 'none'
		});
	};
</script>

<style scoped>
	.container {
		padding: 39rpx;
		background-color: #f5f5f5;
		/* min-height: 100vh;  */
	}

	/* 地址区域样式 */
	.address-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.address-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
	}

	.address-content {
		font-size: 28rpx;
		color: #666;
	}

	.receiver {
		margin-right: 10rpx;
		color: #333;
	}

	.phone {
		margin-right: 10rpx;
		color: #666;
	}

	.address {
		display: block;
		margin-top: 5rpx;
		color: #333;
	}

	/* 订单详情区域样式 */
	.order-info-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.order-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		color: #333;
	}

	.order-content {
		font-size: 28rpx;
		line-height: 1.6;
		color: #666;
	}

	.order-detail {
		display: flex;
		margin-bottom: 10rpx;
	}

	.label {
		color: #666;
		width: 160rpx;
	}

	.value {
		flex: 1;
		color: #333;
	}

	/* 商品区域样式 */
	.product-section {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.product-item {
		display: flex;
		align-items: center;
	}

	.product-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.product-info {
		flex: 1;
	}

	.product-name {
		font-size: 30rpx;
		margin-bottom: 10rpx;
		font-weight: 500;
		color: #333;
	}

	.product-spec,
	.product-quantity {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 5rpx;
	}

	.product-points {
		font-size: 28rpx;
		color: #ff5a5f;
		font-weight: bold;
	}

	/* 按钮区域样式 */
	.button-section {
		margin-top: 40rpx;
		position: absolute;
		margin-bottom: 30rpx;
		bottom: 0;
		right: 0px;
		background: #fff;
		width: 100%;
		height: 8%;
		margin: 0;
		padding: 10px 0;
	}

	.button-container {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}

	.see-wuliu-btn {
		width: 100px;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		background-color: #f0f0f0;
		color: #333;
		border: none;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s;
		text-align: center;
	}

	.confirm-btn {
		width: 100px;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		background-color: #ff7300;
		color: white;
		border: none;
		box-shadow: 0 4rpx 10rpx rgba(255, 115, 0, 0.3);
		transition: all 0.3s;
		text-align: center;
		margin: 0px 31rpx;
	}

	.go-pickup-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		background: linear-gradient(to right, #4caf50, #43a047);
		color: #fff;
		border: none;
		box-shadow: 0 4rpx 10rpx rgba(76, 175, 80, 0.3);
		transition: all 0.3s;
		text-align: center;
	}

	.see-wuliu-btn:hover,
	.confirm-btn:hover,
	.go-pickup-btn:hover {
		transform: translateY(-5rpx);
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.15);
	}

	/* 状态区域样式 */
	.status-section {
		text-align: center;
		margin-top: 40rpx;
	}

	.status-icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.status-icon-img {
		width: 80rpx;
		height: 80rpx;
	}

	.status-text {
		font-size: 36rpx;
		font-weight: bold;
		margin-top: 10rpx;
		color: #333;
	}

	.status-desc {
		font-size: 28rpx;
		color: #666;
	}
</style>